Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make Markdown images lazy loaded #6598

Merged
merged 2 commits into from
Feb 4, 2022
Merged

feat: make Markdown images lazy loaded #6598

merged 2 commits into from
Feb 4, 2022

Conversation

johnnyreilly
Copy link
Contributor

@johnnyreilly johnnyreilly commented Feb 3, 2022

Motivation

I would like to improve the performance of sites built with Docusaurus by making use of the native support in browsers for lazy loading images to reduce the number of HTTP requests made on page load.

I was able to do this using a rehype plugin which I wrote about here: https://blog.johnnyreilly.com/2022/02/02/lazy-loading-images-with-docusaurus

However, it occurred to me that all images being lazy loaded might not be a bad thing. Hence this pull request which adds the attribute loading="lazy" to img elements.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

You can see from the code that the snapshots have changed, such that images are lazy loaded due to the attribute loading="lazy" being added to img elements.

Related PRs

Not a related PR, but this was also discussed here: https://docusaurus.io/feature-requests/p/lazy-loading-images-in-blog-posts-by-default and here: https://twitter.com/swyx/status/1488506746360401930

cc @sw-yx

@netlify
Copy link

netlify bot commented Feb 3, 2022

✔️ [V2]
Built without sensitive environment variables

🔨 Explore the source changes: 31a8d06

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61fd10d75df4260007f728ed

😎 Browse the preview: https://deploy-preview-6598--docusaurus-2.netlify.app

@github-actions
Copy link

github-actions bot commented Feb 3, 2022

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 76
🟢 Accessibility 100
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 92

Lighthouse ran on https://deploy-preview-6598--docusaurus-2.netlify.app/

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks 👍

To me this looks fine to apply this by default, as content images are less important to load compared to other images (like layout images)

Later we'll introduce an official core <Img> component in Docusaurus and it's a common practice to add some IntersectionObserver logic to make it load eagerly images that are close to entering the viewport (similar to links/idealImage)

Note users that want to disable lazy loading can still disable this thanks to a remark plugin. It's not very convenient/elegant but it's just erasing loading="lazy" from the image jsx string.

I think we can ship this by default and see if anyone complains, to eventually revert or provide an option.

My only concern: do we want lazy loading for images we couldn't compute width/height? Not sure when this happens but it may lead to annoying layout shifts as the user scrolls down.

Any opinion @Josh-Cena ?

@Josh-Cena
Copy link
Collaborator

My opinions were given in that canny post. I'm also okay with this feature. My internet's wonky tonight, so I'll look over this during the weekend I hope

@Josh-Cena Josh-Cena changed the title feat: lazy loading images feat: make Markdown images lazy loaded Feb 4, 2022
@Josh-Cena Josh-Cena added the pr: polish This PR adds a very minor behavior improvement that users will enjoy. label Feb 4, 2022
Copy link
Collaborator

@Josh-Cena Josh-Cena left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do this! Later in #5999 we can try to make it configurable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: polish This PR adds a very minor behavior improvement that users will enjoy.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants